<template>
	<view class="statistics">
		<view class="charts-title bg-white row-between">
			<view class=" bold xl ">
				每日支出
			</view>
			<view class="charts-btn white" @click="departmentShow = true">
				<text class="mr10">{{department != '' ? department.bumen : '部门选择'}}</text>
				<u-icon name="arrow-down-fill" size="20" color="#ffffff"></u-icon>
			</view>
		</view>
		
		
		<view class="charts-box bg-white">
			<qiun-data-charts :ontouch="true" type="mix" :opts="optionObj" :chartData="chartsDataMix"/>
		</view>
		
		<view class="statistics-data mt20 bg-white">
			<view class="bold xl">
				数据统计
			</view>
			<view class="row-between statistics-item">
				<view class="week-data-title row">
					<u-image width="36rpx" height="36rpx" src="../../static/icon/census-week.png"></u-image>
					<view class="ml10">
						本周支出
					</view>
				</view>
				<view class="week-data-price">
					￥{{weekData}}
				</view>
			</view>
			<view class="row-between statistics-item">
				<view class="week-data-title row">
					<u-image width="36rpx" height="36rpx" src="../../static/icon/census-month.png"></u-image>
					<view class="ml10">
						本月支出
					</view>
				</view>
				<view class="week-data-price">
					￥{{monthData}}
				</view>
			</view>
		</view>
		
		<!-- 部门选择 -->
		<u-picker mode="selector" v-model="departmentShow"  :default-selector="defaultSelector" :range="departmentList" :range-key="rangeKey" @confirm="departmentConfirm"></u-picker>
	</view>
</template>

<script>
export default {
	data() {
		return {
			chartsDataMix:{
				"categories": [],
				"series": [{
					"name": "每日支出",
					"index":1,
					"data": [],
					"type": "column",
					"color": "#603DFA",
				}, {
					"name": "每日审核支出",
					"index":1,
					"data": [],
					"type": "column",
					"color": "#4e9b27",
				}, {
					"name": "每日总支出",
					"data": [],
					"type": "line",
					"style": "curve",
					"color": "#e10c0c"
				}]
			},
			optionObj:{
				yAxis:{
					data:[
						{position: 'left',title: '折线'},
						{position: 'right',min: 0,max: 200,title: '柱状图',textAlign: 'left'},
					],
				},
			},
			weekData: 0,
			monthData: 0,
			
			departmentList:[],
			departmentShow: false,
			rangeKey: 'bumen',
			defaultSelector: [0],
			department: '',
			department_id: 0,
		};
	},
	onLoad() {
		this.getDataFun();
	},
	methods: {
		complete(e) {
			
		},
		getDataFun() {
			let _this = this;
			let post_params = {
				bumen_id: _this.department_id
			};
			_this.$u.post('/api/review/statistical', post_params).then(res => {
				_this.weekData = res.list.week_total_amount;
				_this.monthData = res.list.month_total_amount;
				_this.chartsDataMix.categories = res.list.daytitle_arr;
				_this.chartsDataMix.series[0].data = res.list.dayval_arr;
				_this.chartsDataMix.series[1].data = res.list.dayval_arr_audit;
				_this.chartsDataMix.series[2].data = res.list.dayval_arr_total;
				_this.departmentList = [{
					id: 0,
					bumen: '全部',
				}];
				
				_this.departmentList = _this.departmentList.concat(res.list.bumen_arr);
			});
		},
		// 选择审核人
		departmentConfirm(e) {
			this.department = this.departmentList[e[0]];
			this.department_id = this.department.id;
			this.defaultSelector = [e[0]];
			this.getDataFun();
		},
	}
};
</script>

<style lang="scss">
	page {
		background-color: #F6F6F6;
	}
	
	.statistics {
		.charts-title {
			padding: 20rpx;
			
			.charts-btn {
				background-color: #ed8238;
				padding: 8rpx;
				border-radius: 10rpx;
			}
		}
		.charts-box {
			width: 100%;
			height: 700rpx;
		}
		
		.statistics-data {
			padding: 20rpx;
			
			.statistics-item {
				background-color: #F6F6F6;
				margin: 30rpx;
				padding: 20rpx;
				border-radius: 10rpx;
				
				.week-data-price {
					color: #0040FF;
				}
			}
		}
	}
	
</style>
